import React, {Component} from 'react';
import './index.css';
import PropTypes from 'prop-types';
import Item from '../Item';

export default class Index extends Component {

  static propTypes = {
    todo: PropTypes.array.isRequired,
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  }

  render() {
    const {todo} = this.props;
    return (
        <div>
          <ul className="todo-main"
              style={{display: todo.length > 0 ? 'block' : 'none'}}>
            {
              todo.map((item) => {
                return (
                    <Item key={item.id} deleteTodo={this.props.deleteTodo}
                          updateTodo={this.props.updateTodo}
                          {...item}/>
                )
              })
            }
          </ul>
        </div>
    );
  }
}
